import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import ImageJump from '../jsm/ImageJump.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader4").innerText);
    lib.clearCanvas(gl, new Color("rgba(1,1,1,1)"), 1);


    let max = 1;
    let allArr = [
        -0.5, -0.8, 10, 0, 0,
        -0.5, 0.8, 10, 0, max,
        0.5, -0.8, 10, max, 0,
        0.5, 0.8, 10, max, max,
    ];
    // let allArr = [
    //     -0.5, -0.8, 10, 0, max,
    //     -0.5, 0.8, 10, max, max,
    //     0.5, -0.8, 10, 0, 0,
    //     0.5, 0.8, 10, max, 0,
    // ];

    let mm4 = new Matrix4();

    const imageJumpData = { set: 0.0, };

    let u_Mm4 = gl.getUniformLocation(gl.program, 'u_ModelMatrix')
    gl.uniformMatrix4fv(u_Mm4, false, mm4.elements)

    let poly = new Poly({
        gl: gl,
        arr: allArr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
            { name: 'a_Pin', size: 2, beginIndex: 3 },
        ],
        uniforms: {
            u_Set: {
                type: 'uniform1f',
                value: imageJumpData.set,
            }
        }
    });


    poly.draw(["TRIANGLE_STRIP"]);

    const u_Mask1 = new Image();
    u_Mask1.src = '../Images/Image011.png';
    const u_Texture1 = new Image();
    u_Texture1.src = '../Images/Texture01.jpg';
    const u_Texture2 = new Image();
    u_Texture2.src = '../Images/Texture02.jpg';
    const u_Texture3 = new Image();
    u_Texture3.src = '../Images/Texture03.jpg';
    const u_Texture4 = new Image();
    u_Texture4.src = '../Images/Texture04.jpg';
    const u_Texture5 = new Image();
    u_Texture5.src = '../Images/Texture05.jpg';
    const u_Sampler1 = new Image();
    u_Sampler1.src = '../Images/Image010.png';

    const textureArr = [u_Texture1, u_Texture2, u_Texture3, u_Texture4, u_Texture5];


    Promise.all([
        imgPromise(u_Mask1),
        imgPromise(u_Texture1),
        imgPromise(u_Texture2),
        imgPromise(u_Texture3),
        imgPromise(u_Texture4),
        imgPromise(u_Texture5),
        imgPromise(u_Sampler1),
    ]).then(() => {

        poly.texture = {
            'u_Mask1': {
                image: u_Mask1,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            },
            'u_Sampler1': {
                image: u_Sampler1,
                WRAP_W: gl.CLAMP_TO_EDGE,
                WRAP_H: gl.CLAMP_TO_EDGE,
            }
        };

        poly.uniforms.u_Set.value = 1;
        poly.updateUniform();

        poly.updateTexture();
        poly.draw(["TRIANGLE_STRIP"]);

        var imageJump = new ImageJump({
            data: imageJumpData,
            images: textureArr,
            onEnd: updateImage
        });
        imageJump.start(1000);


        (function ani() {
            imageJump.update();
            poly.uniforms.u_Set.value = imageJumpData.set;
            poly.updateUniform();
            poly.draw(["TRIANGLE_STRIP"]);
            requestAnimationFrame(ani);
        })();
    });


    //修改图片
    function updateImage(images) {
        poly.texture['u_Texture1'] = {
            image: images[0],
            WRAP_W: gl.CLAMP_TO_EDGE,
            WRAP_H: gl.CLAMP_TO_EDGE,
        };
        poly.texture['u_Texture2'] = {
            image: images[1],
            WRAP_W: gl.CLAMP_TO_EDGE,
            WRAP_H: gl.CLAMP_TO_EDGE,
        };

        poly.updateTexture();
    }







};
